<template>
<el-dialog
  title="提示"
  :visible="showCosPlay"
  width="30%"
  @close="btoNo"
  >
  <el-checkbox-group v-model="roleIds">
    <el-checkbox :label="item.id" v-for="item in list" :key="item.id">{{item.name}}</el-checkbox>
  </el-checkbox-group>
  <span slot="footer" class="dialog-footer">
    <el-button @click="btoNo">取 消</el-button>
    <el-button type="primary" @click="btnOk">确 定</el-button>
  </span>
</el-dialog>
</template>

<script>
// 引入获取所有角色的身份
import {getRoleList} from "@/api/setting"
import {userMessage,cosPlayfe} from "@/api/user"
export default {
  // 接收显示隐藏的方法
  props:{
showCosPlay:{
  type:Boolean,
  // required:true
  default:false
},
// 获取角色的id有父元素
userId:{
  type:[String,Number],
default: null
},
  },
data() {
      return {
        //创建接收角色信息的数组
        list:[],
        roleIds:[]
      };
    },
    created(){
      this.getRoleList()
      // this.userMessage()
    },
    methods: {
    async  getRoleList(){
try{
const {rows}=  await getRoleList({
  page:1,
  pagesize:20
})
this.list=rows
// console.log(rows);
}catch(eer){
console.log(eer);
}
      },
      // 获取id的身份角色
 async userMessage(id){
try{
const {roleIds} =await userMessage(id)
this.roleIds=roleIds
console.log(roleIds);
}catch(eer){
console.log(eer);
}
      },
      // 点击确认按钮
   async btnOk(){
try{
await cosPlayfe({id:this.userId, roleIds:this.roleIds})
// 分配角色
this.$message({
          message: '分配角色成功',
          type: 'success'
        });
        // 关闭弹窗
this.$emit("update:showCosPlay", false)
}catch(eer){
console.log(eer);
}
     },
    //  点击取消按钮
     btoNo(){
      this.roleIds=[]
this.$emit("update:showCosPlay", false)
     }
    }
}
</script>

<style>

</style>